<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助与指南 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }
        
        .faq-answer.expanded {
            max-height: 500px;
        }
        
        .faq-icon {
            transition: transform 0.3s ease-in-out;
        }
        
        .faq-icon.rotated {
            transform: rotate(180deg);
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen">
        <!-- 顶部标题区域 -->
        <header id="page-header" class="gradient-bg px-6 py-6">
            <div id="header-content" class="flex items-center justify-between">
                <button id="back-button" class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-left text-accent text-lg"></i>
                </button>
                <h1 id="page-title" class="text-xl font-semibold text-accent">帮助与指南</h1>
                <div class="w-10"></div> <!-- 占位元素保持标题居中 -->
            </div>
        </header>

        <!-- 帮助内容区域 -->
        <section id="help-content" class="px-6 -mt-4 pb-8">
            <!-- 快速入门 -->
            <div id="quick-start-section" class="bg-bg-card rounded-2xl p-6 shadow-card mb-6">
                <h2 id="quick-start-title" class="text-lg font-semibold text-text-primary mb-4 flex items-center">
                    <i class="fas fa-rocket text-accent mr-3"></i>
                    快速入门
                </h2>
                <div id="quick-start-steps" class="space-y-4">
                    <div id="step-1" class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-accent rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <span class="text-white text-xs font-medium">1</span>
                        </div>
                        <div>
                            <h3 class="font-medium text-text-primary mb-1">上传文稿</h3>
                            <p class="text-sm text-text-secondary">点击首页的"上传文稿"按钮，选择需要校对的文件</p>
                        </div>
                    </div>
                    <div id="step-2" class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-accent rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <span class="text-white text-xs font-medium">2</span>
                        </div>
                        <div>
                            <h3 class="font-medium text-text-primary mb-1">配置校对</h3>
                            <p class="text-sm text-text-secondary">选择文稿类型，设置校对规则和自定义术语库</p>
                        </div>
                    </div>
                    <div id="step-3" class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-accent rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <span class="text-white text-xs font-medium">3</span>
                        </div>
                        <div>
                            <h3 class="font-medium text-text-primary mb-1">开始校对</h3>
                            <p class="text-sm text-text-secondary">点击"开始校对"，等待AI处理完成</p>
                        </div>
                    </div>
                    <div id="step-4" class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-accent rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <span class="text-white text-xs font-medium">4</span>
                        </div>
                        <div>
                            <h3 class="font-medium text-text-primary mb-1">审阅修改</h3>
                            <p class="text-sm text-text-secondary">对照原稿和校稿，接受或拒绝修改建议</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 常见问题 -->
            <div id="faq-section" class="bg-bg-card rounded-2xl p-6 shadow-card mb-6">
                <h2 id="faq-title" class="text-lg font-semibold text-text-primary mb-4 flex items-center">
                    <i class="fas fa-question-circle text-accent mr-3"></i>
                    常见问题
                </h2>
                
                <div id="faq-list" class="space-y-4">
                    <!-- FAQ项目1 -->
                    <div id="faq-item-1" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-1" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">支持哪些文件格式？</span>
                            <i id="faq-icon-1" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-1" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                目前支持的文件格式包括：<br>
                                • TXT格式 (.txt)<br>
                                • Word文档 (.docx)<br>
                                • PDF文档 (.pdf)<br>
                                建议文件大小不超过100MB以获得最佳体验。
                            </p>
                        </div>
                    </div>

                    <!-- FAQ项目2 -->
                    <div id="faq-item-2" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-2" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">校对需要多长时间？</span>
                            <i id="faq-icon-2" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-2" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                校对时间取决于文稿长度和复杂度：<br>
                                • 1万字以内：约30秒-2分钟<br>
                                • 10万字：约5-10分钟<br>
                                • 百万字级：约10-15分钟<br>
                                系统会显示实时进度，您可以在等待期间进行其他操作。
                            </p>
                        </div>
                    </div>

                    <!-- FAQ项目3 -->
                    <div id="faq-item-3" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-3" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">如何使用自定义术语库？</span>
                            <i id="faq-icon-3" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-3" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                1. 进入个人中心，点击"术语库管理"<br>
                                2. 点击"添加术语"，输入术语名称和解释<br>
                                3. 在校对设置中启用"自定义术语库"<br>
                                系统会在校对时自动检查专业术语的准确性。
                            </p>
                        </div>
                    </div>

                    <!-- FAQ项目4 -->
                    <div id="faq-item-4" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-4" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">可以批量处理多个文件吗？</span>
                            <i id="faq-icon-4" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-4" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                可以的。在上传页面，您可以同时选择多个文件进行批量处理。系统会按顺序进行校对，并在全部完成后通知您。
                            </p>
                        </div>
                    </div>

                    <!-- FAQ项目5 -->
                    <div id="faq-item-5" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-5" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">校对结果可以导出吗？</span>
                            <i id="faq-icon-5" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-5" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                可以导出多种格式：<br>
                                • 仅校稿：导出修改后的文稿<br>
                                • 原稿与校稿比对：显示修改痕迹<br>
                                支持导出为TXT、DOCX格式。
                            </p>
                        </div>
                    </div>

                    <!-- FAQ项目6 -->
                    <div id="faq-item-6" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-6" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">如何提高校对准确性？</span>
                            <i id="faq-icon-6" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-6" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                1. 选择正确的文稿类型（小说、公文、专业图书）<br>
                                2. 添加专业术语到自定义术语库<br>
                                3. 启用所有相关的校对规则<br>
                                4. 对于重要文稿，建议进行人工二次审阅
                            </p>
                        </div>
                    </div>

                    <!-- FAQ项目7 -->
                    <div id="faq-item-7" class="border-b border-border-light last:border-b-0 pb-4 last:pb-0">
                        <button id="faq-question-7" class="w-full flex items-center justify-between text-left">
                            <span class="font-medium text-text-primary">文件安全性如何保障？</span>
                            <i id="faq-icon-7" class="fas fa-chevron-down text-text-secondary faq-icon"></i>
                        </button>
                        <div id="faq-answer-7" class="faq-answer mt-3">
                            <p class="text-sm text-text-secondary leading-relaxed">
                                我们采用多重安全措施：<br>
                                • 数据传输全程加密<br>
                                • 文件存储加密保护<br>
                                • 严格的访问控制策略<br>
                                • 符合隐私保护相关法律法规
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 联系我们 -->
            <div id="contact-section" class="bg-bg-card rounded-2xl p-6 shadow-card">
                <h2 id="contact-title" class="text-lg font-semibold text-text-primary mb-4 flex items-center">
                    <i class="fas fa-envelope text-accent mr-3"></i>
                    联系我们
                </h2>
                <div id="contact-info" class="space-y-3">
                    <div id="contact-email" class="flex items-center space-x-3">
                        <i class="fas fa-envelope text-text-secondary"></i>
                        <span class="text-sm text-text-secondary">support@wenmokan.com</span>
                    </div>
                    <div id="contact-phone" class="flex items-center space-x-3">
                        <i class="fas fa-phone text-text-secondary"></i>
                        <span class="text-sm text-text-secondary">400-888-9999</span>
                    </div>
                    <div id="contact-hours" class="flex items-center space-x-3">
                        <i class="fas fa-clock text-text-secondary"></i>
                        <span class="text-sm text-text-secondary">工作时间：周一至周五 9:00-18:00</span>
                    </div>
                </div>
                <div id="feedback-tip" class="mt-4 p-4 bg-primary rounded-xl">
                    <p class="text-sm text-text-secondary">
                        如有其他问题或建议，欢迎随时联系我们，我们将竭诚为您服务！
                    </p>
                </div>
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                window.location.href = 'P-USER_CENTER.html';
            });

            // FAQ展开/收起功能
            for (let i = 1; i <= 7; i++) {
                const questionButton = document.querySelector(`#faq-question-${i}`);
                const answerDiv = document.querySelector(`#faq-answer-${i}`);
                const icon = document.querySelector(`#faq-icon-${i}`);

                questionButton.addEventListener('click', function() {
                    // 切换答案显示状态
                    answerDiv.classList.toggle('expanded');
                    icon.classList.toggle('rotated');
                });
            }

            // 联系信息点击事件（可选，未来可添加拨打电话或发送邮件功能）
            document.querySelector('#contact-phone span').addEventListener('click', function() {
                console.log('需要调用第三方接口实现拨打电话功能');
            });

            document.querySelector('#contact-email span').addEventListener('click', function() {
                console.log('需要调用第三方接口实现发送邮件功能');
            });
        });
    </script>
</body>
</html>